<template>
    <div class="box"> <!-- 创建一个div容器，设置样式为.box -->
        <div class="oneDay"></div> <!-- 在盒子中创建一个div，设置样式为.oneDay -->
        <div class="month"></div> <!-- 在盒子中创建一个div，设置样式为.month -->
    </div>
</template>

<script setup>
    const day = [ '日','一', '二', '三', '四', '五', '六'] // 定义一个数组day，包含了一周中每一天的汉字表示
    setInterval(function () { // 创建一个定时器
      const date = new Date() // 获取当前时间并存储在变量date中
      let nowHours = date.getHours() // 获取当前时间的小时数
      const nowMinutes = date.getMinutes() // 获取当前时间的分钟数
      let nowSecond = date.getSeconds() // 获取当前时间的秒数
      nowHours = nowHours < 10 ? '0' + nowHours : nowHours // 如果当前小时数小于10，则在前面添加0
      nowSecond = nowSecond < 10 ? '0' + nowSecond : nowSecond // 如果当前秒数小于10，则在前面添加0
      // 将当前时间显示在.oneDay的div容器中
      document.querySelector('.oneDay').innerHTML = `${nowHours}:${nowMinutes}:${nowSecond}`
    }, 1000) // 设置定时器的时间间隔为1000毫秒
 
    setInterval(function () { // 创建另一个定时器
      const date = new Date() // 获取当前时间并存储在变量date中
      const nowYear = date.getFullYear()
      const nowMonth = date.getMonth() // 获取当前月份
      const nowDate = date.getDate() // 获取当前日期
      const nowDay = date.getDay() // 获取当前星期几对应的数字
      // 将当前日期和星期几以及月份显示在.month的div容器中
      document.querySelector('.month').innerHTML = `${nowYear}年${nowMonth + 1}月${nowDate}日&nbsp星期${day[nowDay]}`
    }, 1000) // 设置定时器的时间间隔为1000毫秒
  </script>

<style>
.box {
      width: 300px;
      height: 150px;
      background-color: rgb(42, 48, 64);
      margin: 50px auto;
      caret-color: transparent;
    }
 
    .oneDay {
      height: 100px;
      width: 100%;
      color: white;
      font-size: 60px;
      font-weight: 600;
      text-align: center;
      line-height: 100px;
    }
 
    .month {
      height: 50px;
      width: 100%;
      color: white;
      text-align: center;
      letter-spacing: 2px
    }
</style>